import {messages} from "share/common";
import React, {Component} from 'react';
import {Button, Alert, Icon} from 'antd';
import AdvanceTable from 'components/advanced-table';
import ConsumerUtil from './consumer-util';
import ConsumerColumns from './consumer-columns';
import SlideFrame from 'components/slide-frame';
import DefaultRuleFrame from './edit-frames/default-rule-frame';
import OtherRuleFrame from './edit-frames/other-rule-frame';
import NewConsumerServer from './new-consumer-server';
import 'styles/supplier-management/new-consumer-management/consumer-travel-other-set.scss';

const SimpleTable = AdvanceTable.SimpleTable;


class ConsumerTravelOtherSet extends Component {

  constructor(props) {
    super(props);
    this.serachForm = ConsumerUtil.getConsumerTravelSetSearchForm();
    this.columns = ConsumerColumns.getOtherTravelColumns(this);
    this.slideFrames = {
      rule: DefaultRuleFrame,
      new: OtherRuleFrame,
      edit: OtherRuleFrame,
    };
    this.state = {
      showSlideFrame: false, // 显示侧滑
      frameTitle: messages('supplier-1.key78')/*默认规则*/, // 侧滑标题名称
      currentFrame: 'rule',
      editData: '', // 编辑数据
    }
  }

  // 高级表格配置项生产方法
  createAdvanceOption = () => {
    return {
      service: this.advanceTableServer,
      index: true,
      onRef: this.advanceTableRef,
      rowKey: record => record.companyCode,
      onGetData: this.advanceTableOnGetData,
      columns: this.columns,
      searchForm: this.serachForm,
      footer: <Button onClick={() => {
        this.context.router.goBack()
      }}>{messages('common.back')/*返回*/}</Button>,
      bordered: true,
      onRow: (record) => {
        return {
          onClick: () => {
            this.onEditButton(record);
          }
        };
      }
    }
  }


  onEditButton = (record) => {
    this.onOpenSlideFrame('edit');
    this.setState({editData: record});
  }

  onDeleteButton = (record, e) => {
    e.stopPropagation();
    NewConsumerServer(this).deleteOtherPriData(record.id).then(res => {
      this.tableRef.getList();
    })
  }

  advanceTableRef = (ref) => {
    this.tableRef = ref;
  }

  advanceTableOnGetData = (dataSource, {total, page, pageSize}) => {

  }

  advanceTableServer = (page, size, searchValues) => {
    const params = Object.assign({}, searchValues, {page: page, size: size});
    return NewConsumerServer(this).getOtherListData(params);
  }

  onCloseFrame = (flag) => {
    if (flag === 'saved') {
      this.tableRef.getList();
    }
    this.setState({showSlideFrame: false, editData: ''});
  }

  onOpenSlideFrame = (type) => {
    let currentKey = '';
    switch (type) {
      case 'new' :
        currentKey = 'new';
        break;
      case 'edit' :
        currentKey = 'edit';
        break;
      case 'rule' :
        currentKey = 'rule';
        break;
      default :
        break;
    }
    this.setState({
      showSlideFrame: true,
      currentFrame: currentKey,
    })
  }

  render() {
    const {showSlideFrame, frameTitle, currentFrame, editData} = this.state;
    return (
      <div className='consumer-travel-other-set'>
        <div className='alert-margin'>
          <Alert
            type='info'
            showIcon
            message={messages('supplier-1.key79')/*可在此页面设置启用差旅申请单可选【其他应用商】*/}
          />
        </div>
        <a className='rule-default' onClick={() => this.onOpenSlideFrame('rule')}>
          <Icon type="file-text"/>
          <span>{messages('supplier-1.key78')/*默认规则*/}</span>
        </a>
        <div style={{height: 'calc(100vh - 102px)'}}>
          <SimpleTable
            {...this.createAdvanceOption()}
          >
            <Button type='primary'
                    onClick={() => this.onOpenSlideFrame('new')}>{messages('common.create')/*新建*/}</Button>
          </SimpleTable>
        </div>
        {
          showSlideFrame && (
            <SlideFrame
              show={showSlideFrame}
              title={frameTitle}
              params={editData || {}}
              content={this.slideFrames[currentFrame]}
              onClose={this.onCloseFrame}
              afterClose={this.onCloseFrame}
            />
          )
        }
      </div>
    )
  }
}

ConsumerTravelOtherSet.contextTypes = {
  router: React.PropTypes.object
};

export default ConsumerTravelOtherSet
